<template>
    <div>
        <el-dialog v-model="props.isShow" :title="props.isAdd ? '添加菜单' : '编辑菜单'" center :before-close="beforeClose">
            <el-form :model="menuForm" :rules="rules" ref="menuRef">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="menuForm.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="menuForm.pid" placeholder="请选择上级菜单" @change="changePid">
                        <el-option label="顶级菜单" :value="0" />
                        <el-option v-for="item in store.getters['menu/getMenuList']" :key="item.pid" :label="item.title"
                            :value="item.id" />
                        <!-- <el-option label="商城管理" :value="5" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio-group v-model="menuForm.type" class="ml-4">
                        <el-radio disabled :label="1" size="small">目录</el-radio>
                        <el-radio disabled :label="2" size="small">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单图标" v-if="menuForm.type == 1" :label-width="formLabelWidth">
                    <el-input v-model="menuForm.icon" autocomplete="off" />
                </el-form-item>
                <el-form-item label="菜单地址" v-else :label-width="formLabelWidth">
                    <el-input v-model="menuForm.url" autocomplete="off" />
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="menuForm.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel(menuRef)">取消</el-button>
                    <el-button type="primary" @click="confirm(menuRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts' setup>
// 引入vue中的方法
import { reactive, ref, defineProps, defineEmits } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus';
// 引入仓库
import { useStore } from 'vuex';
// 引入接口
import { menuinfo, menuadd, menuedit } from '../../request/api';

let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
let menuForm = ref({
    pid: 0,//上级分类编号  注意：顶级菜单- 0number
    title: '',//菜单名称string
    icon: '',//图标string
    type: 1,//类型 1目录2菜单number
    url: '',//菜单地址string
    status: 1,//状态   1正常2禁用   number类型number
})
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 2, max: 6, message: '请输入2-6为字符', trigger: 'blur' },
    ],
    pid: [
        {
            required: true,
            message: '请选择上级菜单',
            trigger: 'change',
        },
    ]
})
const formLabelWidth = '120px';

// 点击右上角x  关闭弹窗
//before-close	关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.	Function(done) (done 用来关闭 Dialog)
const beforeClose = (done: any) => {
    // 先执行done 在执行cancel关闭事件  否则报错
    done();
    cancel(menuRef.value)
}

// 声明一个id
let newId = 0;

// 调用父传子方法
let emit = defineEmits(['cancel']);
// 获取节点
let menuRef = ref<FormInstance>()
// 关闭弹窗
const cancel = (formEl: FormInstance | undefined) => {
    // 通知父组件
    emit('cancel', false);
    // 如果没有值  就终止
    if (!formEl) return;
    // 清空表单
    menuForm.value = {
        pid: 0,//上级分类编号  注意：顶级菜单- 0number
        title: '',//菜单名称string
        icon: '',//图标string
        type: 1,//类型 1目录2菜单number
        url: '',//菜单地址string
        status: 1,//状态   1正常2禁用   number类型number
    };
    // 清空规则验证
    formEl.resetFields();
}

// 调用仓库方法
let store = useStore();

// 点击确定提交表单
const confirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate(val => {
        // 验证通过
        if (val) {
            if (props.isAdd) {
                // 添加表单
                menuadd(menuForm.value).then((res: any) => {
                    if (res.code == 200) {
                        // 添加成功
                        ElMessage.success(res.msg)
                        // 关闭弹窗
                        cancel(menuRef.value);
                        // 重新渲染视图
                        store.dispatch('menu/getMenulistActions');
                        
                    } else {
                        // 添加失败
                        ElMessage.error(res.msg)
                    }
                })
            } else {
                // 编辑表单
                // 将id添加到menuForm
                menuedit({...menuForm.value,id:newId}).then(res => {
                    if (res.code == 200) {
                        // 编辑成功
                        ElMessage.success(res.msg)
                        // 关闭弹窗
                        cancel(menuRef.value);
                        // 重新渲染视图
                        store.dispatch('menu/getMenulistActions')
                    } else {
                        // 编辑失败
                        ElMessage.error(res.msg)
                    }
                })
            }
        }

    })

}

//数据回显
const lookup = (id: number) => {
    menuinfo({ id }).then((res: any) => {
        if (res.code == 200) {
            menuForm.value = res.list;
            // 添加id
            // menuForm.value.id = id;
            newId = id;
        }

    })

}

// 根据选择的菜单 根据pid获取是目录还是菜单
const changePid = (pid: number) => {
    // console.log(pid);
    if (pid != 0) {
        // 如果pid不等于0   那么type类型就为菜单
        menuForm.value.type = 2;
    }

}

// 暴露回显组件  
defineExpose({
    lookup
})
</script>
<style scoped lang='less'></style>